window.onload = ()=> {
    const contentBox = document.querySelector('.content')
    // body中是否有按键
    let isBut = false
    const keyDiv = document.createElement('div')
    keyDiv.className = 'key-div'
    const spanBox = document.createElement('span')
    spanBox.innerText = '+'

    let animationKey = new KeyframeEffect(contentBox, [
        { opacity: 1 },
        { opacity: 0 },
    ], {
        duration: 1000,
        easing: 'ease-in-out',
        // 开始状态
        fill: 'forwards',
    })

    let anim = new Animation(animationKey, document.timeline)
    anim.onfinish = ()=> {
        isBut = false
 
    }

    window.keyAnim.keyShow((e) => {
        if (isBut) {
            // 直接完成动画
            anim.finish()

        }
        // 删除contenBox里的所有元素
        while (contentBox.firstChild) {
            contentBox.removeChild(contentBox.firstChild)
        }
        
        e.forEach((key, index) => {
            // 复制元素 keyDiv
            const element = keyDiv.cloneNode(true);
            element.innerText = key;
            contentBox.appendChild(element);

            // 只在最后一个键之前添加 spanBox
            if (index < e.length - 1) {
                contentBox.appendChild(spanBox.cloneNode(true));
            }
        });
        // console.log('动画开始')
        isBut = true
        anim.play();
    })
}